<template>
    <div style="margin-bottom: 1.5rem">
        <div class="userBack">
            <p>
                个人中心
                <button class="logout" @click="logout()">退出登录</button>
            </p>
            <div class="user_infromation">
                <img :src="user.user_avatar" alt="" />
                <div>
                    <p>账号：{{ user.user_nickname }}</p>
                    <p>
                        余额：<span>{{ user.user_balance }}</span>
                    </p>
                    <div class="level">
                        <a :href="getlevelurl()">
                            <div>等级 Lv{{ user.user_level }}</div>
                            <div>积分 {{ user.user_credit }}</div>
                        </a>
                    </div>
                </div>
            </div>
            <transition name="fade">
                <div class="userData" v-if="user.today_money >= 0">
                    <ul>
                        <li>
                            <p>{{ user.today_money }}</p>
                            <p>今日收益</p>
                        </li>
                        <li>
                            <p>{{ user.yesterday_money }}</p>
                            <p>昨日收益</p>
                        </li>
                        <li>
                            <p>{{ user.total_money }}</p>
                            <p>累计收益</p>
                        </li>
                    </ul>
                </div>
            </transition>
        </div>
        <!--Center  收益概况-->
        <!--<div class="Center_money">-->
        <!--<ul>-->
        <!--<li>-->
        <!--<p>今日收益</p>-->
        <!--<p><b>{{ user.totay_money }}</b></p>-->
        <!--<p><span>已获取</span></p>-->
        <!--</li>-->
        <!--<li>-->
        <!--<p>预计佣金</p>-->
        <!--<p><b>{{ user.audit_money }}</b></p>-->
        <!--<p><span>待审核</span></p>-->
        <!--</li>-->
        <!--<li>-->
        <!--<p>累计收益</p>-->
        <!--<p><b>{{ user.finish_money   }}</b></p>-->
        <!--<p><span>已获得</span></p>-->
        <!--</li>-->
        <!--</ul>-->
        <!--</div>-->

        <!--Center next  排版-->
        <div class="Center_next">
            <ul>
                <li @click="Center_next(1)">
                    <img src="../../img_myself/a1.png" alt="" />
                    <p>个人资料</p>
                </li>
                <li @click="Center_next(2)">
                    <img src="../../img_myself/a2.png" alt="" />
                    <p>佣金明细</p>
                </li>
                <li @click="Center_next(3)">
                    <img src="../../img_myself/a3.png" alt="" />
                    <p>提现管理</p>
                </li>
                <li @click="Center_next(4)">
                    <img src="../../img_myself/a4.png" alt="" />
                    <p>推荐有奖</p>
                </li>
            </ul>
        </div>
        <!--轮播-->
        <!--<div class="banner_swier">-->
        <!--<img src="../../img_myself/banners.png" alt="">-->
        <!--</div>-->

        <div class="banner_swier">
            <div class="swiper-container swiper-container1">
                <div class="swiper-wrapper">
                    <div class="swiper-slide" v-for="imgs in bannerImgs">
                        <a :href="hdlink"><img :src="imgs.img"/></a>
                    </div>
                </div>
            </div>
        </div>

        <!--BOTTOM  list-->
        <ul class="Bottom_list">
            <li @click="listNum(1)">
                <div>
                    <div class="fl">
                        <img src="../../img_myself/b1.png" alt="" />
                    </div>
                    <span>赚钱风云榜</span>
                </div>
                <img src="../../img_myself/right.png" alt="" />
            </li>
            <li @click="listNum(2)">
                <div>
                    <div class="fl">
                        <img src="../../img_myself/b2.png" alt="" />
                    </div>
                    <span>绑定任务号</span>
                </div>
                <img src="../../img_myself/right.png" alt="" />
            </li>
            <li>
                <a :href="domain + '/app_html/help_center.html'">
                    <div>
                        <div class="fl">
                            <img src="../../img_myself/b3.png" alt="" />
                        </div>
                        <span>帮助中心</span>
                    </div>
                    <img src="../../img_myself/right.png" alt="" />
                </a>
            </li>
            <li>
                <router-link to="/task/message">
                    <div>
                        <div class="fl">
                            <img src="../../img_myself/b4.png" alt="" />
                        </div>
                        <span>公告中心</span>
                    </div>
                    <img src="../../img_myself/right.png" alt="" />
                </router-link>
            </li>
            <li>
                <router-link to="/service">
                    <div>
                        <div class="fl">
                            <img src="../../img_myself/b5.png" alt="" />
                        </div>
                        <span style="position:relative;"
                            >在线客服
                            <i v-if="unread_num != 0">{{ unread_num }}</i></span
                        >
                    </div>
                    <span
                        style="margin-left: 2rem;font-size: 0.28rem;color: #FD9D9A;"
                        v-if="unread_num != 0"
                        >您有一条新消息，请点击查看</span
                    >
                    <img src="../../img_myself/right.png" alt="" />
                </router-link>
            </li>
            <li v-if="qq_flock">
                <div>
                    <div class="fl">
                        <img src="../../img_myself/b6.png" alt="" />
                    </div>
                    <span
                        v-clipboard="qq_flock"
                        @success="handleSuccess"
                        @error="handleError"
                        >粉丝QQ群：{{ qq_flock }}</span
                    >
                </div>
                <img src="../../img_myself/right.png" alt="" />
            </li>
            <li v-if="user.customer_service_qq">
                <div>
                    <div class="fl">
                        <img src="../../img_myself/b6.png" alt="" />
                    </div>
                    <span
                        v-clipboard="user.customer_service_qq"
                        @success="handleSuccess"
                        @error="handleError"
                        >客服QQ：{{ user.customer_service_qq }}</span
                    >
                </div>
                <img src="../../img_myself/right.png" alt="" />
            </li>
        </ul>
        <barTab />
    </div>
</template>

<script>
import barTab from "@/components/components/barTabBottom";
import api from "../../utils/api";
import { domain } from "../../utils/api";

export default {
    name: "Myself",
    components: {
        barTab
    },
    data() {
        return {
            domain: "",
            bannerImgs: [
                {
                    img:
                        "https://wyrq-2.oss-cn-shanghai.aliyuncs.com/admin/20190109/lCyd8P图层653@2x.png"
                }
            ],
            user: [],
            hdlink:
                localStorage.getItem("activity") +
                "?token=" +
                localStorage.getItem("token") +
                "&game=1",
            qq_flock: false,
            unread_num: 0,
            isNewImformation: false
        };
    },
    created() {
        localStorage.setItem("bartabInx", 4);
        this.qq_flock = localStorage.getItem("qq_flock");
        this.domain = domain;
    },
    methods: {
        handleSuccess(e) {
            this.$toast("复制成功");
        },
        handleError(e) {
            this.$toast("复制失败，此机型不支持微信端复制");
        },
        Center_next(int) {
            if (int == 1) {
                this.$router.push({ path: "/task/Myinformation" });
            } else if (int == 2) {
                this.$router.push({
                    name: "Commission",
                    params: {
                        num: 1
                    }
                });
            } else if (int == 3) {
                this.$router.push({ path: "/task/putMoney" });
            } else if (int == 4) {
                this.$router.push({ path: "/task/Apprentice" });
            }
        },
        listNum: function(index) {
            if (index == 1) {
                this.$router.push({ path: "/task/Rankinglist" });
            } else if (index == 2) {
                this.$router.push({ path: "/task/bindingTab" });
            }
        },
        loop: function(e) {
            this.$nextTick(() => {
                new Swiper(".swiper-container1", {
                    autoplay: 3000
                });
            });
        },
        //    userName
        userFun() {
            api.request("/user", "get", {}).then(resp => {
                this.user = resp.data.data;
                this.unread_num = resp.data.data.unread_num;
            });
        },
        logout() {
            var _that = this;
            api.request("/logout", "post", {}).then(resp => {
                localStorage.clear();
                _that.$router.push({ path: "/task/Login" });
            });
        },
        getlevelurl: function() {
            var level = this.user.user_level;
            var credit = this.user.user_credit;
            if (window.location.href.indexOf("hetaojiazu") != -1) {
                return `https://console-master.hetaojiazu.cn/app_html/level.html?level=${level}&credit=${credit}`;
            } else if (window.location.href.indexOf("localhost") != -1) {
                return `https://console-master.hetaojiazu.cn/app_html/level.html?level=${level}&credit=${credit}`;
            } else {
                return `https://api.woyaorenqi.com/app_html/level.html?level=${level}&credit=${credit}`;
            }
        }
    },
    mounted() {
        this.userFun();
        document.body.scrollTop = 0;
        this.loop();
    }
};
</script>

<style scoped="css">
@import "../../style/Myself.css";

.userData ul li p:nth-child(1) {
    color: #f26549;
    font-size: 0.5rem;
}

.userData ul li p:nth-child(2) {
    color: #989898;
    font-size: 0.4rem;
}
.userData {
    bottom: -7vw;
    top: auto;
}
</style>
